<template>
	<view class="page">
		<!-- 搜索框start -->
		<view class="search-block">
			<view class="search-ico-wapper">
				<image src="../../static/icos/search.png" class="search-ico"></image>
			</view>
			<input type="text" placeholder="搜预告" maxlength="10" class="search-text" confirm-type="search"
				@confirm="searchMe" />
		</view>
		<!-- 搜索框end -->

		<!-- 预告片列表start -->
		<view class="movie-list page-block">
			<view class="movie-wapper" v-for="trailer in trailerList">
				<image :src="trailer.cover" :data-trailerId="trailer.id" @click="showTrailer" class="poster"></image>
			</view>

		</view>
		<!-- 预告片end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: "",
				page: 1,
				totalPages: 1,
				trailerList: [{
						id: 'dc-004',
						name: '蝙蝠侠:黑暗骑士崛起',
						poster: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/BatManTheDarkKnightRises/trailer.mp4',
						score: 9.1
					},
					{
						id: 'marvel-1026',
						name: '毒液:致命守护者',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Venom/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Venom/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Venom/trailer.mp4',
						score: 9.9
					},
					{
						id: 'marvel-1005',
						name: '复仇者联盟3:无限战争',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers3/trailer.mp4',
						score: 8.8
					},
					{
						id: 'marvel-1016',
						name: '银河护卫队2',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/GuardiansOfTheGalaxy2/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/GuardiansOfTheGalaxy2/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/GuardiansOfTheGalaxy2/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1018',
						name: '钢铁侠3',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/IronMan3/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1029',
						name: '雷神3:诸神的黄昏',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Thor3/trailer.mp4',
						score: 8.5
					},
					{
						id: 'marvel-1022',
						name: '蜘蛛侠:英雄归来',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/SpiderManHomecoming/trailer.mp4',
						score: 8.0
					},
					{
						id: 'marvel-1023',
						name: '绿巨人',
						poster: 'http://122.152.205.72:88/superhero/DC/GreenLantern/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/GreenLantern/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/GreenLantern/trailer.mp4',
						score: 7.5
					},
					{
						id: 'xman-1007',
						name: '金刚狼:殊死一战',
						poster: 'http://122.152.205.72:88/superhero/xman/Logan/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/xman/Logan/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/xman/Logan/trailer.mp4',
						score: 5.9
					},
					{
						id: 'dc-1011',
						name: '沙赞',
						poster: 'http://122.152.205.72:88/superhero/DC/Shazam/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/DC/Shazam/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/DC/Shazam/trailer.mp4',
						score: 6.0
					},
					{
						id: 'marvel-1016',
						name: '复仇者联盟4:终极之战',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers4/trailer.mp4',
						score: 7.3
					},
					{
						id: 'xman-1010',
						name: 'X战警:新变种人',
						poster: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/xman/TheNewMutants/trailer.mp4',
						score: 5.5
					},
					{
						id: 'marvel-1020',
						name: '蜘蛛侠2004',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/SpiderMan2004/trailer.mp4',
						score: 6.9
					},
					{
						id: 'marvel-1003',
						name: '复仇者联盟',
						poster: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/poster.jpg',
						cover: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/cover.jpg',
						trailer: 'http://122.152.205.72:88/superhero/MARVEL/Avengers1/trailer.mp4',
						score: 8.9
					}
				],
			}
		},
		onLoad() {
			uni.showLoading({
				mask: true,
				title: '请稍候...'
			})
			uni.showNavigationBarLoading();
			// 加载预告片列表
			uni.request({
				url: this.serverUrl + '/search/list?keywords=&page=&pageSize=',
				method: 'POST',
				success: (res) => {
					if (res.data.status == 200) {
						this.trailerList = res.data.data.rows
					}
				},
				complete: () => {
					uni.hideNavigationBarLoading()
					uni.hideLoading()
				}
			});

		},
		// 页面上啦触底事件
		onReachBottom() {
			var page = this.page + 1
			var tatalPages = this.totalPages
			var keywords = tihs.keywords
			
			// 当前页>总页数
			if(page>tatalPages){
				return
			}
			
			this.pageTrailerList(this.keywords, page, 15)
			
		},
		methods: {
			pageTrailerList(keywords, page, pageSize) {
				uni.request({
					url: this.serverUrl + '/search/list?keywords=' + keywords + '&page=' + page + '&pageSize=' +
						pageSize,
					method: 'POST',
					success: (res) => {
						if (res.data.status == 200) {
							var tempList = res.data.data.rows
							// 数组拼接
							this.trailerList = this.trailerList.concat(tempList)
							this.totalPages = res.data.data.total
							this.page = page
						}
					}
				});
			},
			searchMe(e) {
				var value = e.detail.value
				this.keywords = value
				this.trailerList = []

				this.pageTrailerList(this.keywords, 1, 15)
			},
			showTrailer(e){
				var trailerId = e.currentTarget.dataset.trailerId
				// 页面跳转接口api
				uni.navigateTo({
					url: "../movie/movie?trailerId=" + trailerId
				})
			}
		}
	}
</script>

<style>
	@import url("search.css");
</style>
